<script>
import Default from '@/portal4.1/pc/container/default.vue'
import DefaultEntity from '@/template/entityTemp/defaultEntity.vue'
import DefaultMore from '@/template/DefaultMore.vue'
import bakImage from '@/assets/images/item.jpg'
import { requestGet } from '@/api/system/common'
export default {
  name: 'PcIndex',
  components: { Default, DefaultEntity, DefaultMore },
  data() {
    return {
      timer: null,
      screenWidth: document.body.clientWidth,
      image: bakImage,
      dataList: [],
      time: null
    }
  },
  computed: {
    // 加载默认主题，后面课动态设置默认主题
    Default() {
      return Default
    },
    defaultBak() {
      return {
        background: 'url(' + this.image + ') repeat'
      }
    }
  },
  watch: {
    screenWidth: {
      handler(newName, old) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = newName
          this.timer = true
          const that = this
          setTimeout(function() {
            that.sjCount(that.screenWidth)// 窗口大小变化后执行的方法
            that.timer = false
          }, 10)
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    const mid = this.$route.query.lid
    if (undefined !== mid && mid !== '' && mid !== null) {
      this.$store.commit('SET_LAYOUT_MENU_ID', mid)
    }
    this.initSystem()
  },
  beforeDestroy() {
    if (this.time) {
      clearInterval(this.time)
    }
  },
  methods: {
    sjCount(screeWidth) {
      if (screeWidth < 1024) {
        this.$router.push({ path: '/uc/mobile' })
      }
    },
    initSystem() {
      requestGet('rest/api/manager/system/all', {}).then(res => {
        const { content } = res
        this.dataList = content
      })
      this.time = setTimeout(this.initSystem, 10 * 60 * 1000)
    }
  }
}
</script>

<template>
  <div class="portal-body" :style="defaultBak">
    <component :is="Default" />
    <default-entity />
    <default-more />
    <div v-if="dataList" style="display: none">
      <iframe v-for="(item,index) in dataList" :key="'iframe-'+index" :src="item.url" />
    </div>
  </div>
</template>

<style scoped>
.portal-body {
  width: 100vw;
  height: 100vh;
}
</style>
